<script setup>
import mainImg from "@/assets/homeImg/mainImg.jpg";
import study_satisfy from "@/assets/homeImg/study_satisfy.jpg";
</script>

<template>
  <!-- 主页 -->
  <div class="homepage">
 
    <!-- 下面是图 -->
    <div class="bottom">
      <div class="left box">
        <div class="leftTop">
          <plot_feature_importance></plot_feature_importance>
        </div>
        <div class="leftBottom">
          <depression_sleep_pie></depression_sleep_pie>
        </div>
      </div>
      <!-- 中间图 -->
      <div class="center box">
        <div class="centerTop">
          <depression_study_boxplot></depression_study_boxplot>
        </div>
        <div class="centerBottom">
          <img :src="mainImg" alt="" />
        </div>
      </div>
      <!-- 右边图 -->
      <div class="right box">
        <div class="rightTop">
          <img :src="study_satisfy" alt="" />
          <div class="text">学习满意度与抑郁情况的关系</div>
        </div>
        <div class="rightBottom">
          <depression_suicede_bar></depression_suicede_bar>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.homepage {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  padding: 10px;
  .top {
    font-size: 40px;
    text-align: center;
    font-family: "rwmbzt";

  }
  .bottom {
    display: flex;
    flex: 1;
    min-height: 100px;
    justify-content: space-between;
    // background: #246da8;
    .box {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: space-between;
    }
    .left {
      .leftTop {
        margin: 0 10px 0 0;
        flex: 1;
        // background: #d62b2b;
      }
      .leftBottom {
        flex: 1;
        margin: 10px 10px 0 0;
        // background: #9f6d6d;
      }
    }
    .center {
      .centerTop {
        margin: 0 10px 0 0;
        flex: 1;
        // background: #2bb7d6;
      }
      .centerBottom {
        position: relative;
        flex: 1;
        margin: 10px 10px 0 0;
        // background: #6d9f95;
        overflow: hidden;

        img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 150%;
          height: 150%;
          object-fit: cover;
          object-position: center; /* 以图片中心为基点定位 */
        }
      }
    }
    .right {
      
      .rightTop {
        position: relative;
        flex: 1;
        min-height: 100px;
        // background: #2b6dd6;
        img {
          width: 100%;
          height: 100%;
        }
        .text {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 2px;
          font-size: 18px;
          font-weight: 600;
          background: #ffffff;
        }
      }
      .rightBottom {
        flex: 1;
        margin: 10px 0 0 0;
        // background: #986d9f;
      }
    }
  }
}
</style>
